<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="never">
    <script src="../js/common.js"></script>
    <script src="../../application/vue.js"></script>
    <script src="../../application/jquery.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../../application/css/animate.css">
    <link rel="import" href="../vue-component/navBar.html">
    <!-- <link rel="import" href="../vue-component/film_item.html"> -->
    <link rel="import" href="../vue-component/film_list.html">
    <link rel="import" href="../vue-component/bottomBar.html">
    <link rel="import" href="../vue-component/comments.html">
    <link rel="import" href="../pages/home.html">
    <link rel="import" href="../pages/films.html">
    <link rel="import" href="../pages/filmDetail.html">
    <title>电影首页</title>
    <script>
        Vue.component("navBar", navBar);
        // Vue.component("filmItem", filmItem);
    </script>
    <script>
        window.onload = function () {
            new Vue({
                el: ".app",
                components: {
                    BottomBar,
                    Home,
                    Films,
                    FilmDetail
                },
                data: {
                    page: "Home",
                    filmId: 0
                },
                methods: {
                    getPage(arg) {
                        this.page = arg;
                    }
                },
                beforeMount() {
                    this.$on("update:detail", (arg, id) => {
                        this.page = arg;
                        // console.log(this);
                        this.filmId = id;
                    })
                }
            })
        }
    </script>
</head>

<body>
    <!-- 项目容器 -->
    <div class="app">
        <!-- 导航栏--搜索框 -->
        <nav-bar></nav-bar>
        <!-- 首页分类 -->
        <div class="content-box">
            <!-- 利用语法糖来闪现双向数据流 -->
            <!-- <component :is="page" :page.sync="page"></component>  -->
            <!-- 利用子向父传递数据 -->
            <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
                <keep-alive>
                    <component :is="page" @update:page="getPage"></component>
                </keep-alive>
            </transition>
        </div>
        <!-- 底部评论 -->
        <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
            <keep-alive>
                <bottom-bar v-show="page=='FilmDetail'"></bottom-bar>
            </keep-alive>
        </transition>

    </div>
</body>

</html>